<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<link rel="stylesheet" href="css/bootstrap.css">
		<script src="js/jquery.min.js"  type="text/javascript"></script>
		<script src="js/bootstrap.js" type="text/javascript"></script>	
		<script src="js/holder.js"></script>
		<style>
			.navbar .user-icon:hover .dropdown-menu {
		            display: block;
		        	}
			.navbar .mail-icon:hover .dropdown-menu {
			            display: block;
			        }
			.dropdown-menu:hover{
			            display: block;
			        }
			.navbar{
		            background: #996ef0!important;
		            opacity: 1!important;
		            margin: 0px;
		            height: 80px;
		            line-height: 80px;
			        }
			.navbar-brand{
			            padding-left: 40px;
			        }
			.navbar-pages{
			            float: left;
			        }
			.page a{
			            margin-right: 100px;
			            font-weight: 500px;
			            color: #ffffff;
			            font-size: 18px;
			            text-decoration: none;
			        }
			.navbar-right{
			            margin-right: 50px;
			            line-height: 80px;
			        }
			.icon-badge{
			            position: absolute;
			            right: 178px;
			            top: 18px;
			            font-size: 14px;
			            font-weight: 400;
			            display: inline-block;
			            padding: 0 5px;
			            height: 18px;
			            background: #ff7351;
			            border-radius: 4px;
			            color: #fff;
			            line-height: 17px;
			        }
			
			.icon{
			            float: right;
			            line-height: 80px;
			            width: 80px;
			        }
			/*search*/			        
			.container{
				width: 1000px;
				height: 400px;
				border: 1px solid lightgray;
				position: relative;
				top: 100px;
				border-top-left-radius: 6px;
				border-top-right-radius: 6px;
				border-bottom-left-radius: 6px;
				border-bottom-right-radius: 6px;
			}        
			 #he{
			 	padding-top: 15px;
			 }  
			.ss{
				padding-top: 15px;
			}    
			#myVue{
				position: relative;
				width: 300px;
				top: 20px;
				left: 80px;
				border-color: lightgray;
			}    
			#man{
				position: absolute;
				right: 10px;
				top: 80px;
			} 
			
			.expert{
				padding-top: 30px;
			} 
			#condition{
				padding-top: 20px;
				margin-left: 165px;
			} 
			.sub{
				border: none ;
				border-top-left-radius: 6px;
				border-top-right-radius: 6px;
				border-bottom-left-radius: 6px;
				border-bottom-right-radius: 6px;
				background: #996EF0;
				width: 150px;
				height: 30px;
				position: absolute;
				top: 350px;
				left: 320px;
			}
			
		
		</style>
	</head>
<body>
		<!--页面导航栏-->
		<nav class="navbar navbar-default navbar-fixed-top">
		    <div class="container-fluid">
		        <div class="navbar-items">
		            <div class="col-lg-2 col-md-2">
		                <a class="navbar-brand" href="#">
		                    <img alt="程续缘LOGO" src="img/logo.png">
		                </a>
		            </div>
		            <div class="navbar-pages">
		                <span class="page"><a href="#">首页</a></span>
		                <span class="page"><a href="#">搜索</a></span>
		                <span class="page"><a href="#">掏心会员</a></span>
		            </div>
		            <div class="navbar-right">
		                <div class="icon user-icon">
		                    <div class="dropdown">
		                        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu1" data-toggle="dropdown"
		                                aria-haspopup="true" aria-expanded="true" style="background: transparent;border: none;">
		                            <img src="img/user.png">
		                        </button>
		                        <ul class="dropdown-menu" aria-labelledby="dropdownMenu1">
		                            <li><a href="#">个人主页</a></li>
		                            <li><a href="#">编辑资料</a></li>
		                            <li><a href="#">修改密码</a></li>
		                            <li role="separator" class="divider" style="padding: 1px"></li>
		                            <li><a href="#">退出</a></li>
		                        </ul>
		                    </div>
		                </div>
		
	                <div class="icon mail-icon">
	                    <div class="dropdown">
	                        <button class="btn btn-default dropdown-toggle" type="button" id="dropdownMenu2" data-toggle="dropdown"
	                                aria-haspopup="true" aria-expanded="true" style="background: transparent;border: none; ">
	                            <img src="img/mail.png">
	                        </button>
	                        <ul class="dropdown-menu" aria-labelledby="dropdownMenu2">
	                            <li><a href="#">消息 <span class="badge dropdown-badge">99</span></a></li>
	                            <li><a href="#">系统消息</a></li>
	                            <li role="separator" class="divider" style="padding: 0px"></li>
	                            <li><a href="#">谁看过我</a></li>
	                        </ul>
	                    </div>
	                    <span class="badge icon-badge">99</span>
	                </div>
	            </div>
	        </div>
		</nav>
	
		<div class="container">
			<img id="man" src="img/cheng.jpg" />
			<!--按钮-->
			<input type="button" class="sub" name="searchBtn" onclick="dochange()" value="搜索">			
			
			<!--搜索意中人-->
			<div id="he">
				<div class="row">
					<div class="col-lg-6">
						<span id="search">搜索意中人</span>
					</div>
					<div class="col-lg-6">
						<section>
							<input type="text" class="form-control" placeholder="输入ID或昵称精准搜索"/>
							<label></label>
						</section>
					</div>	
				</div>
			</div>
				
			<!--基本搜索-->
			<div class="ss">
			<div class="row">
				<div class="col-lg-2">
					<span>基本条件:</span>
				
		
</body>
<script>
	
</script>
</html>
	
